import React, { useMemo, useState, useEffect } from 'react'
import './ShoppingCart.css'
import { Button, Swiper, Checkbox, Space, NavBar } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'
export default function ShoppingCart() {
  const navigate = useNavigate()
  const location = useLocation()
  const [value, setValue] = useState([])
  const back = () => {
    navigate(-1)
  }
  const [data, setData] = useState([])

  
  const getShopping = () => {
    axios.get('http://localhost:3000/getShoppingCart').then(res => {
      setData(res.data.data[0].commodity)
      console.log(res.data.data[0].commodity)
    })
  }
  const [shop, setShop] = useState([])
  const getShop = () => {
    axios.get('http://localhost:3000/getshop').then(res => {
      setShop(res.data.data)
    })
  }
  // 根据id获取店铺名称
  const getshopname = (id) => {
    // 从shop数组中筛选出_id等于id的元素，并返回第一个元素的name属性
    let shopname = shop.filter(item => item._id == id)[0].name
    // 返回店铺名称
    return shopname
  }
  
  useEffect(() => {
    getShopping()
    getShop()
  }, [])
  const prices = useMemo(() => {
    let sum = 0
      for (let j = 0; j < value.length; j++) {
       data.filter(item => {
          if (item.commodityid.name == value[j]) {
            sum += item.num * item.commodityid.price
          }})
      }
    return sum
  },[value])
  const order = () =>{
    let sum = []
      for (let j = 0; j < value.length; j++) {
       data.filter(item => {
          if (item.commodityid.name == value[j]) {
            sum.push(item)
          }})
      }
    return sum
    
  }
  return (
    <div className='shopping'>
      <div className='shopping-cart-top'>
        <NavBar onBack={back} right={
          <div className='shopping-cart-top-right'>
            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E8%B4%AD%E7%89%A9%E8%BD%A6/u1793.svg'></img>
            <span>管理</span>
          </div>
        }><b>购物车</b></NavBar>
      </div>
      <div className='shopping-cart-content'>
        <Checkbox.Group
          value={value}
          onChange={val => {
            setValue(val)
            console.log(val)
          }}>

          {
            data.map((item, index) => {
              return (
                <div className='shopping-cart-content-item' key={index}>
                  <div className='shopping-cart-content-item-left'>
                    {getshopname(item.commodityid.shopid)}
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E8%B4%AD%E7%89%A9%E8%BD%A6/u1805.svg'></img>
                  </div>
                  <div className='shopping-cart-content-item-topa'>
                    <Checkbox value={item.commodityid.name}>
                      <div className='shopping-cart-content-item-top'>
                        <div className='shopping-cart-content-item-top-left'>
                          <img src={item.commodityid.img}></img>
                          <div className='shopping-cart-content-item-top-left-text'>
                            <p>{item.commodityid.name}</p>
                            <p>{item.commodityid.type}</p>
                            <p className='shopping-cart-content-left-text-price'>￥{item.commodityid.price}</p>
                          </div>
                        </div>
                      </div>
                    </Checkbox>
                    <div>
                      <span>×{item.num}</span>
                    </div>
                  </div>

                </div>)
            })
          }
        </Checkbox.Group>
      </div>
      <div className='shopping-cart-content-bottom'>
        <Checkbox
          onChange={(checked) => {
            if (!checked) {
              setValue([])
            } else {
              setValue(data.map(item => item.commodityid.name))
            }
          }}
        >全选</Checkbox>
        <div className='shopping-cart-content-bottom-left'>
          <p >合计：<span className='shopping-cart-content-bottom-left-text'>￥{prices}</span></p>
          <p>已选{value.length}件</p>
        </div>
        <div className='shopping-cart-content-bottom-right' onClick={()=>{
          if(value.length>0){
            navigate('/SubOrder',{
              state:order()
            })
          }
        }}>
          去结算
        </div>
      </div>
    </div>
  )
}
